<!doctype html>
<html lang="zh-cn">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--ie开启edge内核-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--国产浏览器开启webkit内核-->
    <meta name="renderer" content="webkit">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.2.1/css/bootstrap.min.css">

    <title>Hello, world!</title>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

    <style>
        .myheader{
            background-color: aquamarine;
            width: 100%;
            height: 160px;
        }
    </style>
</head>
<body>

   <header>
       <div class="alert alert-info text-center mb-0 rounded-0 alert-dismissible fade show">
           new Bootstrap4
           <button class="close" data-dismiss="alert">&times;</button>
       </div>
       <div class="container">
           <nav class="navbar navbar-expand-sm navbar-light">
               <a href="#" class="navbar-brand">DollarKiller</a>
                <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
                    <span class="navbar-toggler-icon"></span>
                </button>
               <div id="menu" class="collapse navbar-collapse">
                   <ul class="navbar-nav">
                       <li class="nav-item"><a href="" class="nav-link">item</a></li>
                       <li class="nav-item"><a href="" class="nav-link">item</a></li>
                       <li class="nav-item"><a href="" class="nav-link">item</a></li>
                   </ul>
               </div>
           </nav>
       </div>

       <div class="myheader text-success py-5 text-center">
           <h1 class="display3">Linux</h1>
           <a href="#" class="btn btn-primary btn-lg ">Test1</a>
           <a href="#" class="btn btn-danger btn-lg">Test2</a>
       </div>
   </header>
    <main>

        <section class="py-3">
            <h2 class="text-center mb-3">Linux</h2>
            <div class="container">
                <div class="mb-5 row">
                    <div class="col-md-9">
                        <h3>Manjaro</h3>
                        <p>Manjaro是一款基于Arch Linux、对用户友好、全球排名第1的Linux发行版。（排名数据源于DistroWatch，统计日期2018.03.02，时间段3个月。）

                            在Linux圈，Arch的确是一个异常强大的发行版。它有3个无与伦比的优势：

                            滚动更新可以使软件保持最新；
                            AUR软件仓库有着世界上最齐全的Linux软件（参考《一张列表展示ArchLinux系软件有多丰富——看哭百万Debian、RedHat系同学》）；
                            丰富的wiki和活跃的社区让所有问题都可以快速得到满意的答案。
                        </p>
                    </div>
                    <div class="col-md-3">
                        <img src="https://upload-images.jianshu.io/upload_images/3203841-d06ac8a2c9129a54.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp" class="w-100" alt="">
                    </div>
                </div>

                <div class="mb-5 row">
                    <div class="col-md-9 order-md-2">
                        <h3>ubuntu</h3>
                        <p>Ubuntu基于Debian发行版和GNOME桌面环境，而从11.04版起，Ubuntu发行版放弃了Gnome桌面环境，改为Unity，与Debian的不同在于它每6个月会发布一个新版本。Ubuntu的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。Ubuntu具有庞大的社区力量，用户可以方便地从社区获得帮助。 [3]  Ubuntu对GNU/Linux的普及特别是桌面普及作出了巨大贡献，由此使更多人共享开源的成果与精彩。
                        </p>
                    </div>
                    <div class="col-md-3 order-md-1">
                        <img src="https://img-blog.csdn.net/20180525151916724?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpc2hhbmxlaWxpeGlu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" class="w-100" alt="">
                    </div>
                </div>

                <div class="mb-5 row">
                    <div class="col-md-9">
                        <h3>Kali</h3>
                        <p>Kali Linux是基于Debian的Linux发行版， 设计用于数字取证操作系统。由Offensive Security Ltd维护和资助。最先由Offensive Security的Mati Aharoni和Devon Kearns通过重写BackTrack来完成，BackTrack是他们之前写的用于取证的Linux发行版 。
                            Kali Linux预装了许多渗透测试软件，包括nmap 、Wireshark 、John the Ripper，以及Aircrack-ng.[2] 用户可通过硬盘、live CD或live USB
                            运行Kali Linux。Kali Linux既有32位和64位的镜像。可用于x86 指令集。同时还有基于ARM架构的镜像，可用于树莓派和三星的ARM Chromebook
                        </p>
                    </div>
                    <div class="col-md-3">
                        <img src="http://www.linuxprobe.com/wp-content/uploads/2016/05/kali-linux.png" class="w-100" alt="">
                    </div>
                </div>
            </div>
        </section>

        <section class="text-center py-3" style="background-color: #eeeeee">
            <h2>今后计划</h2>
            <div class="container">
                <!--table>thead>tr>th*2^^tbody>(tr>td*2)*3-->
                <table class="table table-hove">
                    <thead>
                    <tr>
                        <th>全栈计划</th>
                        <th>金融计划</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>node</td>
                        <td>MT5</td>
                    </tr>
                    <tr>
                        <td>python</td>
                        <td>平台搭建</td>
                    </tr>
                    <tr>
                        <td>golang</td>
                        <td>量化回测</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <section class="py-3">
            <h2 class="text-center">我爱Linux</h2>
            <div class="container">
                <ul class="nav nav-tabs">

                    <li class="nav-item">
                        <a href="#manjaro" class=" nav-link active" data-toggle="tab">Manjaro</a>
                    </li>
                    <li class="nav-item">
                        <a href="#ubuntu" class="nav-link" data-toggle="tab">Ubuntu</a>
                    </li>
                </ul>
                <div class="tab-content py-3">
                    <div id="manjaro" class="tab-pane active">Linux操作系统是工具，是拿来用的，而不是折腾这个工具本身，普通用户都明白这个道理，DistroWatch排行榜代表的正是千千万万“普通用户”的心声，他们只想要一个好用的操作系统，而Manjaro恰恰是不折腾、软件多、好看、好用的Linux操作系统的典范。

                        有些“高级用户”总喜欢贬低普通用户，然而到底谁更聪明呢？

                        普通用户讲求实用，不会为了某种虚妄的目的去用Gentoo、LFS自虐；
                        普通用户时间宝贵，不会轻易尝试安装过程跋山涉水的ArchLinux、或者一个软件动辄就要编译n个小时的Gentoo；
                        普通用户讲究分工协作，把专业的事情交给专业的人做，他不会在自己的世界里瞎折腾，结果发现自己折腾的成果其实没有任何价值；
                        这个世界聪明的普通用户总是占多数，真理掌握在他们手里，市场也永远在他们手里，他们的投票结果不得不服。
                    </div>
                    <div id="ubuntu" class="tab-pane">其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词 [2]  ，类似儒家“仁爱”的思想，意思是“人性
                        ”、“我的存在是因为大家的存在”，是非洲传统的一种价值观。
                    </div>
                </div>
            </div>
        </section>

        <!--<section class="container mb-5">-->
            <!--<nav>-->
                <!--<div class="nav nav-tabs" >-->
                    <!--<a class="nav-item nav-link active" data-toggle="tab" href="#nav-home"  >Home</a>-->
                    <!--<a class="nav-item nav-link"  data-toggle="tab" href="#nav-profile"  >Profile</a>-->
                    <!--<a class="nav-item nav-link"  data-toggle="tab" href="#nav-contact"  >Contact</a>-->
                <!--</div>-->
            <!--</nav>-->
            <!--<div class="tab-content">-->
                <!--<div class="tab-pane active" id="nav-home" >.1..</div>-->
                <!--<div class="tab-pane " id="nav-profile" >.2..</div>-->
                <!--<div class="tab-pane " id="nav-contact" >..3.</div>-->
            <!--</div>-->
        <!--</section>-->


    </main>
    <footer class="text-center py-3 text-muted">
        <section class="py-3" style="background-color: aquamarine;">
            <a href="#" class="btn btn-primary btn-lg ">Test1</a>
            <a href="#" class="btn btn-danger btn-lg">Test2</a>
        </section>
        this is footer
    </footer>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>